Issue number: internal

What is the current behavior?

Currently, when an error text is shown, it may not announce itself to voice assistants. This is because the way error text currently works is by always existing in the DOM, but being hidden when there is no error. When the error state changes, the error text is shown, but as far as the voice assistant can tell it's always been there and nothing has changed.

What is the new behavior?

• Updated aria attributes
• Added observer with an observer

Does this introduce a breaking change?

• Yes
• No

Other information

Checkbox preview
Toggle preview
Radio Group preview

⚠️ Flakiness ⚠️

The flakiness on checkbox and toggle is because when a native input is present on the page, the browser will have the screen reader to be really fast when it comes to checking information. This speed ends up being too fast for ion-checkbox to be able to add the error text. This leads to the error text not being announce consistently. There's no issue when it comes to ion-input or ion-textarea because Ionic uses the native inputs so their arias are read. There's also no issue with ion-select because we don't have a native input. It's only an issue with checkbox and the others is because it has a native input that is being hidden. So the browser sees that and speeds up the screen reader.

The flakiness on radio group is because when you tab out of the last radio button, the ionBlur event is emitted by the child . This event bubbles up, but the timing is still too early for the group.